<template>
  <div>
    <div class="lbt">
      <!-- 轮播图 -->
      <swiper
        :slidesPerView="1"
        :spaceBetween="30"
        :loop="true"
        :pagination="{
          clickable: true,
        }"
        :navigation="true"
        :modules="modules"
        class="mySwiper"
      >
        <swiper-slide v-for="banner in bannerList" :key="banner.album_id">
          <img class="imgl" :src="banner.picurl" alt="" />
        </swiper-slide>
      </swiper>
    </div>
    <div class="main">
      <!-- 最新上架 -->
      <div class="mod_part">
        <div class="part_hd">
          <h2 class="part_tit">最新上架</h2>
        </div>
        <div class="mod_album_list">
          <ul class="ablum_list_list">
            <li
              class="album_lsst_item"
              style="margin-bottom: 10px"
              v-for="(abl) in newReleases.filter((item:any,index:number)=>{return index <= 4})"
              :key="abl.album_id"
            >
              <div class="album_list_item_box">
                <div class="album_list_cover mod_cover">
                  <a :href="abl.buypage">
                    <img
                      :src="abl.imgurl && abl.imgurl.data.imageUrl"
                      class="album_list_pic"
                    />
                    <i class="mod_cover_mask"></i>
                  </a>
                </div>
                <h4 class="album_list_title">
                  <span class="album_list_title_txt">
                    <a class="af" :href="abl.buypage">{{ abl.album_name }}</a>
                  </span>
                </h4>
                <div class="album_list_author">
                  <a
                    class="c_tx_thin afont"
                    :title="abl.singer_name"
                    :href="abl.buypage"
                    >{{ abl.singer_name }}</a
                  >
                </div>
                <div class="album_list_price">
                  <strong class="album_list_price_numb c_tx_thin afont"
                    >$ {{ abl.price * 0.01 }}
                  </strong>
                  <a class="mod_btn album_list_btn_buy" :href="abl.buypage">
                    立即购买</a
                  >
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- 本周热销 -->
      <div class="mod_part">
        <div class="part_hd">
          <h2 class="part_tit">本周热销</h2>
        </div>
        <div class="mod_album_list">
          <ul class="ablum_list_list">
            <li
              class="album_lsst_item"
              style="margin-bottom: 10px"
              v-for="(abl) in theWeekSales.filter((item:any,index:number)=>{return index <= 4})"
              :key="abl.album_id"
            >
              <div class="album_list_item_box">
                <div class="album_list_cover mod_cover">
                  <a :href="abl.buypage">
                    <img
                      :src="abl.imgurl && abl.imgurl.data.imageUrl"
                      class="album_list_pic"
                    />
                    <i class="mod_cover_mask"></i>
                  </a>
                </div>
                <h4 class="album_list_title">
                  <span class="album_list_title_txt">
                    <a class="af" :href="abl.buypage">{{ abl.album_name }}</a>
                  </span>
                </h4>
                <div class="album_list_author">
                  <a
                    class="c_tx_thin afont"
                    :title="abl.singer_name"
                    :href="abl.buypage"
                    >{{ abl.singer_name }}</a
                  >
                </div>
                <div class="album_list_price">
                  <strong class="album_list_price_numb c_tx_thin afont"
                    >$ {{ abl.price * 0.01 }}
                  </strong>
                  <a class="mod_btn album_list_btn_buy" :href="abl.buypage">
                    立即购买</a
                  >
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="main" v-for="(co, index) in contentList" :key="index">
      <!-- 后面遍历的数据列表 -->
      <div class="mod_part">
        <div class="part_hd">
          <h2 class="part_tit">{{ co.title }}</h2>
        </div>
        <div class="mod_album_list">
          <ul class="ablum_list_list">
            <li
              class="album_lsst_item"
              style="margin-bottom: 10px"
              v-for="(abl, index) in co.albumlist.filter((item:any,index:number)=>{return index <= 4})"
              :key="abl.album_id"
            >
              <div class="album_list_item_box">
                <div class="album_list_cover mod_cover">
                  <a :href="abl.buypage">
                    <img
                      :src="abl.imgurl && abl.imgurl.data.imageUrl"
                      class="album_list_pic"
                    />
                    <i class="mod_cover_mask"></i>
                  </a>
                </div>
                <h4 class="album_list_title">
                  <span class="album_list_title_txt">
                    <a class="af" :href="abl.buypage">{{ abl.album_name }}</a>
                  </span>
                </h4>
                <div class="album_list_author">
                  <a
                    class="c_tx_thin afont"
                    :title="abl.singer_name"
                    :href="abl.buypage"
                    >{{ abl.singer_name }}</a
                  >
                </div>
                <div class="album_list_price">
                  <strong class="album_list_price_numb c_tx_thin afont"
                    >$ {{ abl.price * 0.01 }}
                  </strong>
                  <a class="mod_btn album_list_btn_buy" :href="abl.buypage">
                    立即购买</a
                  >
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'DigitalAlbum',
}
</script>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { Pagination, Navigation } from 'swiper'
import { ref, onMounted } from 'vue'
import { getDigitalAlbumApi } from '@/api/DigitalAlbum/index'
import { getImgurlApi } from '@/api/home/getRecommendApi'

const modules = [Pagination, Navigation]

const contentList = ref<any>([])

const newReleases = ref<any>([])

const theWeekSales = ref<any>([])

const bannerList = ref<any>([])

onMounted(async () => {
  const res = await getDigitalAlbumApi()
  console.log(res)
  contentList.value = res.data.content.filter((item: any, index: number) => {
    return index > 1
  })
  bannerList.value = res.data.banner

  newReleases.value = res.data.content[0].albumlist
  theWeekSales.value = res.data.content[1].albumlist

  newReleases.value.forEach(async (item: any) => {
    item.imgurl = await getImgurlApi(item.album_mid)
  })

  theWeekSales.value.forEach(async (item: any) => {
    item.imgurl = await getImgurlApi(item.album_mid)
  })

  contentList.value.forEach((item: any) => {
    item.albumlist.forEach(async (ite: any) => {
      ite.imgurl = await getImgurlApi(ite.album_mid)
    })
  })

  // console.log(newReleases)

  // console.log(contentList, newReleases)

  // 图片请求...
})

/* actid: 754
album_id: "30400998"
album_mid: "003rJok1031NHl"
album_name: "依如初见"
buypage: "https://i.y.qq.com/n2/m/digitalbum/buy/index.html?mid=003rJok1031NHl&_video=true"
company_name: "未确定"
dis_end: "0"
dis_price: 2000
dis_start: "0"
intro: "洛天依《依如初见》"
pre: 0
price: 2000
publictime: 1662652800
salecount: 352
singer_name: "洛天依" */
</script>

<style scoped>
/* .album_list_author {
  margin: 5px 0 5px 0;
} */
.album_list_cover {
  transition: all 0.5s;
  opacity: 1;
}
.album_list_cover:hover {
  transform: scale(1.05);
  opacity: 0.8;
}

.lbt {
  margin-top: 50px;
  margin-bottom: 50px;
}
.af {
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
.album_list_title {
  width: 224px;
  margin: 0;
  margin-top: 10px;
  padding: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.album_list_btn_buy {
  border: 1px solid #999;
  border-radius: 2px;
  font-size: 12px;
  position: absolute;
  right: 0;
  width: 80px;
  height: 26px;
  line-height: 26px;
  text-align: center;
}
.album_list_price {
  width: 224px !important;
  height: 28px !important;
}

.album_list_price_numb {
  font-size: 16px;
}
.part_tit {
  font-size: 24px;
  color: red;
}
.afont {
  text-align: center;
  line-height: 28px;
  color: #999;
  font-size: 14px;
}

.mySwiper {
  width: 731px;
  margin: auto;
}
.imgl {
  width: 731px;
  height: 293px;
  line-height: 293px;
  margin: auto;
}
.albummall_exclusive .main {
  padding-bottom: 20px;
}
.main {
  width: 1200px;
  height: 425px;
  padding: 35px 0 0;
}
.main {
  z-index: 2;
}
.main,
.section_inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.albummall_exclusive .mod_part,
.albummall_exclusive .mod_part_detail {
  position: relative;
  margin-bottom: 30px;
  width: 1200px;
}
.album_list_pic {
  width: 224px;
  height: 224px;

  /* 超出隐藏不行 */
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.albummall_exclusive .part__hd,
.albummall_exclusive .part_detail__hd {
  height: 60px;
}
.albummall_exclusive .mod_album_list .album_list__list {
  margin-right: -20px;
}
ul {
  display: flex;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
}
element.style {
  margin-bottom: 10px;
}
.albummall_exclusive .mod_album_list .album_list__item {
  float: left;
  width: 20%;
  padding-bottom: 44px;
  overflow: hidden;
}
li {
  list-style: none;
}

.albummall_exclusive .mod_album_list .album_list__item_box {
  position: relative;
  margin-right: 20px;
}
.albummall_exclusive .mod_album_list .album_list__cover {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 100%;
  margin-bottom: 15px;
}
.mod_cover {
  zoom: 1;
}
a,
a:hover {
  text-decoration: none;
}
a {
  color: #000;
  cursor: pointer;
}
.albummall_exclusive .mod_album_list .album_list__pic {
  height: 100%;
  object-fit: cover;
}
.albummall_exclusive .mod_album_list .album_list__pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: scale(1) translateZ(0);
  transition: transform 0.75s;
}
img {
  border: 0;
}
.albummall_exclusive .mod_cover__mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.5s;
}
i {
  font-style: italic;
}
.albummall_exclusive .mod_album_list .album_list__title {
  overflow: hidden;
}
h4 {
  display: block;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}
.albummall_exclusive .mod_album_list .album_list__title_txt {
  float: left;
  max-width: 100%;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 22px;
}
a,
a:hover {
  text-decoration: none;
}
a {
  color: #000;
  cursor: pointer;
}
.albummall_exclusive .mod_album_list .album_list__author,
.albummall_exclusive .mod_album_list .album_list__author a,
.albummall_exclusive .mod_album_list .album_list__other {
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 22px;
}
a,
a:hover {
  text-decoration: none;
}
.album_lsst_item {
  position: relative;
  height: 355px;
  float: left;
  margin-right: 20px;
  padding: 0 0 44px;
}
.album_lsst_item_box {
  display: block;

  margin: 0 0 10px;
  padding: 0 0 44px;
}

a {
  color: #000;
  cursor: pointer;
}
.album_lsst_item_five {
  margin-right: 0;
}
</style>
